<template>
  <el-popover popper-class="showMonthOpen-open" width="60%" @show="showOpen" placement="right" trigger="hover" :open-delay="500">
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      size="mini"
      max-height="280"
      :highlight-current-row="true"
      :header-cell-style="{background:'#FAEBCC',color:'#32639d'}"
      row-class-name="cellBg"
      style="width: 100%;"
    >
      <el-table-column prop="name" label="名称" show-overflow-tooltip>
        <template slot-scope="{row}">
          <span :class="{'fw': row.name==indexName||row.name==rowName}">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_1" label="1月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_1" :class="row.month_1>=0?'positiveFc':'negativeFc'">{{ row.month_1 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_2" label="2月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_2" :class="row.month_2>=0?'positiveFc':'negativeFc'">{{ row.month_2 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_3" label="3月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_3" :class="row.month_3>=0?'positiveFc':'negativeFc'">{{ row.month_3 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_4" label="4月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_4" :class="row.month_4>=0?'positiveFc':'negativeFc'">{{ row.month_4 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_5" label="5月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_5" :class="row.month_5>=0?'positiveFc':'negativeFc'">{{ row.month_5 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_6" label="6月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_6" :class="row.month_6>=0?'positiveFc':'negativeFc'">{{ row.month_6 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_7" label="7月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_7" :class="row.month_7>=0?'positiveFc':'negativeFc'">{{ row.month_7 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_8" label="8月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_8" :class="row.month_8>=0?'positiveFc':'negativeFc'">{{ row.month_8 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_9" label="9月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_9" :class="row.month_9>=0?'positiveFc':'negativeFc'">{{ row.month_9 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_10" label="10月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_10" :class="row.month_10>=0?'positiveFc':'negativeFc'">{{ row.month_10 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_11" label="11月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_11" :class="row.month_11>=0?'positiveFc':'negativeFc'">{{ row.month_11 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="month_12" label="12月" align="center">
        <template slot-scope="{row}">
          <span v-if="row.month_12" :class="row.month_12>=0?'positiveFc':'negativeFc'">{{ row.month_12 }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="ytd" label="YTD" align="center">
        <template slot-scope="{row}">
          <span v-if="row.ytd" :class="row.ytd>=0?'positiveFc':'negativeFc'">{{ row.ytd }}%</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <div slot="reference"  style="cursor: default;">
      <span>{{year}}</span> 
      <i style="color: #08F;" class="el-icon-arrow-right"></i>
    </div>
  </el-popover>
</template>

<script>
import { monthlyIncreaseDialog, strategyMonthlyIncreaseDialog } from '@/api/combManage'
import { classifyMonthlyIncreaseDialog } from '@/api/groupManage'
import { compareMonthlyIncreaseDialog } from '@/api/contrast'

export default {
  props: {
    monthlyIndexData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    row: {
      type: Array | Object,
      default: () => {
        return []
      }
    },
    onlyShowStrategyId: Number | String,
    rowName: String,
    year: String | Number,
    id: String | Number,
    indexName: String,
    type: Number,

    combManageStrategy: Number, // 组合下直接看策略
  },
  data() {
    return {
      visible: false,
      listLoading: false,
      list: []
    }
  },
  methods: {
    showOpen() {
      this.monthlyIncreaseDialogHandle(this.year)
    },
    getmonthVal(month, obj) {
      if(!obj) {
        return null
      }
      const i = obj.findIndex(item => item.month == month)
      if(i!=-1) {
        if(obj[i].monthIncrease) obj[i].growthRate = Number(obj[i].monthIncrease)
        return obj[i].growthRate
      }else {
        return null
      }
    },
    async monthlyIncreaseDialogHandle(year) {
      this.listLoading = true
      let res
      try {
        if(this.type==1) {
          if(this.combManageStrategy==1) {
            res = await monthlyIncreaseDialog({ year, compositionId: this.id })
          }else {
            res = await strategyMonthlyIncreaseDialog({ year, compositionId: this.id })
          }
        }else if(this.type==2) {
          res = await classifyMonthlyIncreaseDialog({ year, classifyId: this.id })
        }else if(this.type==3) {
          res = await compareMonthlyIncreaseDialog({ year, uuid: this.id }) 
        }
        if(res.code == 0) {
          this.listLoading = false
          this.list = []
          if(this.indexName) {
            this.list.push({
              name: this.indexName,
              month_1: this.getmonthVal(1, this.monthlyIndexData[year]),
              month_2: this.getmonthVal(2, this.monthlyIndexData[year]),
              month_3: this.getmonthVal(3, this.monthlyIndexData[year]),
              month_4: this.getmonthVal(4, this.monthlyIndexData[year]),
              month_5: this.getmonthVal(5, this.monthlyIndexData[year]),
              month_6: this.getmonthVal(6, this.monthlyIndexData[year]),
              month_7: this.getmonthVal(7, this.monthlyIndexData[year]),
              month_8: this.getmonthVal(8, this.monthlyIndexData[year]),
              month_9: this.getmonthVal(9, this.monthlyIndexData[year]),
              month_10: this.getmonthVal(10, this.monthlyIndexData[year]),
              month_11: this.getmonthVal(11, this.monthlyIndexData[year]),
              month_12: this.getmonthVal(12, this.monthlyIndexData[year]),
              ytd: this.getmonthVal(13, this.monthlyIndexData[year])
            })
          }
          if(this.rowName) {
            this.list.push({
              name: this.rowName,
              month_1: this.getmonthVal(1, this.row),
              month_2: this.getmonthVal(2, this.row),
              month_3: this.getmonthVal(3, this.row),
              month_4: this.getmonthVal(4, this.row),
              month_5: this.getmonthVal(5, this.row),
              month_6: this.getmonthVal(6, this.row),
              month_7: this.getmonthVal(7, this.row),
              month_8: this.getmonthVal(8, this.row),
              month_9: this.getmonthVal(9, this.row),
              month_10: this.getmonthVal(10, this.row),
              month_11: this.getmonthVal(11, this.row),
              month_12: this.getmonthVal(12, this.row),
              ytd: this.getmonthVal(13, this.row)
            })
          }
          Object.keys(res.body).map(name => {
            const item = res.body[name]
            this.list.push({
              name: name,
              month_1: this.getmonthVal(1, item),
              month_2: this.getmonthVal(2, item),
              month_3: this.getmonthVal(3, item),
              month_4: this.getmonthVal(4, item),
              month_5: this.getmonthVal(5, item),
              month_6: this.getmonthVal(6, item),
              month_7: this.getmonthVal(7, item),
              month_8: this.getmonthVal(8, item),
              month_9: this.getmonthVal(9, item),
              month_10: this.getmonthVal(10, item),
              month_11: this.getmonthVal(11, item),
              month_12: this.getmonthVal(12, item),
              ytd: this.getmonthVal(13, item)
            })
          })
        }
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

